<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>search</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body>
	<div>
		<input id="search" style="height:17px;border-color:blue;" list="titles">
		<button onclick="doSearch()" style="cursor:pointer;">搜索</button>
	</div>

	<datalist id="titles">
		<option>Java</option>
		<option>Springboot</option>
		<option>代码</option>
		<option>搜索引擎</option>
	</datalist>

	<ul hidden="hidden">
		<li><a target="_blank" href="https://www.baidu.com/">Java</a><p>2020-05-20</p></li>
	</ul>

	<script type="text/javascript" src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
	<script type="text/javascript">
		function doSearch() {
			var _s = $('#search').val();
			$.ajax({
				url : 'blog/query/highlight',
				data : {
					'title' : _s
				},
				dataType : 'json',
				traditional : true,
				type : 'get',
				success : function(data) {
					console.log(data);
					$('ul').show();
					var _html = '';
					for (var i = 0; i < data.length; i++) {
						_html += '<li><a target="_blank" href="' + data[i].content + '">' + data[i].title + '</a>';
						_html += '<p>' + data[i].date + '</p></li>';
					}
					$('ul').empty();
					$('ul').append(_html);
				}
			});
		}
	</script>
</body>
</html>